<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height:200px;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			
			window.onload=function(){
				var oBox=document.getElementById('box');
				var shortx=0;
				var shorty=0;
				var positions=[];
				positions.push({//将元素的初始值存放到数组里面。
					x:oBox.offsetLeft,
					y:oBox.offsetTop
				});
				oBox.onmousedown=function(ev){
					var ev=ev||window.event;
					shortx=ev.clientX-oBox.offsetLeft;
					shorty=ev.clientY-oBox.offsetTop;
					positions.push({//将元素的初始值存放到数组里面。
						x:oBox.offsetLeft,
						y:oBox.offsetTop
					})
					document.onmousemove=function(ev){
						var ev=ev||window.event;
						var x1=ev.clientX-shortx;
						var y1=ev.clientY-shorty;
						var cDiv=document.createElement('div');
						cDiv.style.cssText='width:5px;height:5px;position: absolute;left:'+x1+'px;top:'+y1+'px;background:red;';
						document.body.appendChild(cDiv);
						oBox.style.left=x1+'px';
						oBox.style.top=y1+'px';
						positions.push({//将元素的拖拽的位置存放到数组里面。
							x:x1,
							y:y1
						})
					}
					document.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
						console.log(positions);//数组里面存下拖放的位置。
						var timer=setInterval(function(){
							if(positions.length==0){
								clearInterval(timer);
								return false;
							}
							var p=positions.pop();//p每一个值都是一个对象。
							oBox.style.left=p.x+'px';
							oBox.style.top=p.y+'px';
						},30);
					}
					return false;
				}
			}
			
		</script>
	</head>
	<body>
		<div id="box" style="background: blue;"></div>
	</body>
</html>
